<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/alllayui/layui/css/layui.css}"  media="all">
    <link rel="stylesheet" th:href="@{/system/userCenter/userinfo.css}"  media="all">
    <script th:src="@{/alllayui/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/system/js/jquery.min.js}" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户中心</legend>
</fieldset>

<div class="layui-container">  
 
  <div class="layui-row">
    <div class="layui-col-md8">
       <form class="layui-form" action="">
                <input type="hidden" name="id" id="userId" th:value='${user.id}'  >
                 <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                                <input type="text" readonly="readonly"   name='userName'  th:value='${user.userName}' lay-verify="required" lay-reqtext="名称为必填项" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
		         <div class="layui-inline">  
		            <label class="layui-form-label">性别</label>
		            <div class="layui-input-inline">
		                  <select name='sex'  readonly="readonly"  lay-verify="required"  lay-reqtext="性别为必填项"  >
		                          <option value="">请选择</option>
		                          <option th:selected="${user.sex==0 }" value="0" >女</option>
		                          <option th:selected="${user.sex==1 }" value="1" >男</option>
		                  </select>
		            </div>
		        </div>
                </div>
                 <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                           <select name='enable' readonly="readonly"  lay-verify="required">
                               <option value="">请选择</option>
                                   <option value="0"  th:selected='${ user.enable == 0 }'   >启用</option>
                                   <option value="1"  th:selected='${ user.enable == 1 }'   >禁用</option>
                           </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-inline">
                                <input type="text" name='phoneNo' readonly="readonly"   th:value='${user.phoneNo}' lay-verify="required" lay-reqtext="手机号码为必填项" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                </div>
                 <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                                <input type="text" name='mail' readonly="readonly"  th:value='${user.mail}' lay-verify="required" lay-reqtext="邮箱为必填项" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">添加时间</label>
                    <div class="layui-input-inline">
                                                <input type="text" name='addTime' readonly="readonly"  th:value='${user.addTime}' lay-verify="required" lay-reqtext="添加时间为必填项" placeholder="请输入添加时间" autocomplete="off" class="layui-input datePicker">
                    </div>
                </div>
                </div>
                 <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">部门ID</label>
                    <div class="layui-input-inline">
                         <input type="text" name='deptId' readonly="readonly"    th:value='${user.deptId}'  lay-verify="required" lay-reqtext="部门ID为必填项" placeholder="请输入部门ID" autocomplete="off" class="layui-input foreignKey">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-inline">
                                <input type="text" name='deptName' readonly="readonly" th:value='${user.deptName}' lay-verify="required" lay-reqtext="部门名称为必填项" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                </div>
                 
		        
		        <div class="layui-form-item">
		            <label class="layui-form-label">简介</label>
		            <div class="layui-input-inline"> 
		               <textarea name="info" placeholder="请输入简介" th:text='${user.info}' readonly="readonly"  class="layui-textarea" autocomplete="off" ></textarea>
		            </div>
		        </div>
		        
           
		</form>
       
    </div>
    <div class="layui-col-md4"> 
       <div class="layui-row" >  
	       <div class="layui-upload layui-col-md10">  
	          <shiro:hasPermission name="userCenter/updatePic"> 
	               <button type="button"   class="layui-btn layui-btn-xs" id="updatePic">修改头像</button> 
	          </shiro:hasPermission> 
			  <shiro:lacksPermission name="userCenter/updatePic"> 
				   <button type="button" style="visibility: hidden;"   class="layui-btn layui-btn-xs" id="updatePic">修改头像</button> 
			  </shiro:lacksPermission> 
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" style="width:200px;height:200px;border: 1px solid #ddd;"  
			    th:src="${( userExt.userPic != null && !#strings.isEmpty(userExt.userPic)) ? userExt.userPic : '@{/system/images/defalutUserPic.jpg}'}"
			    id="preView">
			    <p id="demoText"></p>
			  </div>
			</div>  
	       
       </div>
       
    </div>
  </div>
  </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户扩展信息</legend>
</fieldset>
<div class="layui-container">  
  <div class="layui-row">
       <div class="layui-col-md8">
      		 <form class="layui-form" action="">
      		 <input type="hidden" name="userId" id="userId2" th:value='${user.id}'  >
      		    <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label">身份证号</label>
	                    <div class="layui-input-inline">
	                         <input type="text" name='personCard'     th:value='${userExt.personCard}'  lay-verify="required" lay-reqtext="请输入身份证号为必填项" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
	                    </div>
	                </div>
	                 
	                 <div class="layui-inline">
	                    <label class="layui-form-label">生日</label>
	                    <div class="layui-input-inline">
	                        <input type="text" name='birthday'   th:value='${userExt.birthday}' lay-verify="required" lay-reqtext="生日为必填项" placeholder="请输入生日" autocomplete="off" class="layui-input datePicker">
	                    </div>
                    </div>
	                 
                 </div> 
                <div class="layui-form-item"> 
			        <div class="layui-input-block">
			            <button type="submit" class="layui-btn" lay-submit="" lay-filter="subBtn">提交</button>
			        </div> 
			    </div>
      		 </form>
       </div>
  </div>
</div>

 

<script>

layui.use(['jquery','form','laydate','upload'], function(){
    var form = layui.form
	    ,layer = layui.layer
	    ,$ = layui.$ ;
      var laydate = layui.laydate;
	  var upload = layui.upload;
	  var userId = $("#userId").val();
	  //普通图片上传
	  var uploadInst = upload.render({
	    elem: '#updatePic'
	    ,url: '/userCenter/updatePic'
	    ,data: {
	    		  id: function(){
	    		    return $('#userId').val();
	    		  }
	           }
	    ,field:'myPic'
	    ,size:1024*500
	    ,before: function(obj){
	    	//console.log(uploadInst);
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#preView').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(res.code > 0){
	        return layer.msg('上传失败');
	      }
	      //上传成功
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	  

	  form.on('submit(subBtn)', function(data){
          let data2Send = data.field;
          $.post("/userCenter/updateUserExt",data2Send,function (res) {
			if(res.message == 'SUCCESS'){             
            	  layer.msg('保存成功!', {
                      icon: 1,
                      time: 5000
                  });
              } else { 
            	  layer.msg('保存失败!', {
                      icon: 1,
                      time: 5000
                  });
              }
              
          },"json");
      });
	 

      //同时绑定多个
      lay('.datePicker').each(function(){
          laydate.render({
              elem: this
              ,trigger: 'click'
          });
      });
});
</script>

</body>